/**
 * Created by Freeman on 2016/8/3.
 */
import React, {Component, PropTypes} from 'react'
import {Link} from 'react-router'
import classnames from 'classnames'
import {Dropdown} from 'react-bootstrap'
import defaultAvatar from '../../assets/images/avatar.png'
class Header extends Component {
    constructor(props) {
        super(props)

    }
    componentDidMount(){
        const {auth,getUserInfo} = this.props;
        if(auth.token){
            getUserInfo();
        }
    }
    render() {
        const {auth, logout} = this.props;
        return (
            <div className="navbar-box navbar-skin">
                <div className="navbar-menu">
                    <Link className={'navbar-item logo '} title="首页" to="/">
                        博
                    </Link>
                </div>

                <div className="navbar-expanded">
                    <div>
                        <a className="navbar-item change-mode" href="javascript:;">
                            <i className="fa fa-sun-o"></i>
                        </a>
                    </div>
                    {
                        (auth.token && auth.user) ?
                            <div>
                                <a href="javascript:;" className="navbar-item expanded-logout" onClick={logout}
                                   title="登出">
                                    <i className="fa fa-sign-out"></i>
                                </a>
                                <Link to="/mine" className="navbar-item expanded-avatar" title={auth.user.nickname}>
                                    <img src={ auth.user.avatar || defaultAvatar} role="presentation"/>
                                </Link>
                            </div>
                            :
                            <div>
                                <Link to="/sign_up" activeClassName="active" className="navbar-item" title="注册">
                                    <i className="fa fa-user-plus"></i>
                                </Link>
                                <Link activeClassName="active" className="navbar-item" title="登录" to="/login">
                                    <i className="fa fa-sign-in"></i>
                                </Link>
                            </div>
                    }
                </div>


                <div className="navbar-shrink">
                    {(auth.token && auth.user) ?
                        <Dropdown id="dropdown-menu" className="pull-right">
                            <a href="javascript:;" className="shrink-avatar" bsRole="toggle">
                                <img src={ auth.user.avatar || defaultAvatar} role="presentation"/>
                            </a>
                            <Dropdown.Menu className="dropdown-menu">
                                <li className={classnames({'active':location.pathname === '/mine/profile'})}><Link to="/mine/profile" ><i className="fa fa-cog"></i> 设置</Link></li>
                                <li className={classnames({'active':location.pathname === '/mine/posts'})}><Link to="/mine/posts" ><i className="fa fa-user"></i> 博客</Link></li>
                                <li className="divider"></li>
                                <li>
                                    <a href="javascript:;" className="shrink-logout" onClick={logout}>
                                        <i className="fa fa-sign-out"></i> 登出
                                    </a>
                                </li>
                            </Dropdown.Menu>
                        </Dropdown>
                        :
                        <div className="pull-right">
                            <Link to="/sign_up" activeClassName="active" className="shrink-login" title="注册">
                                <i className="fa fa-user-plus"></i> 注册
                            </Link>
                            <Link className="shrink-login" title="登录" to="/login">
                                <i className="fa fa-sign-in"></i> 登录
                            </Link>
                        </div>
                    }
                </div>

            </div>
        )
    }
}

Header.propTypes = {
    auth: PropTypes.object.isRequired,
    logout:PropTypes.func.isRequired,
    getUserInfo: PropTypes.func.isRequired,
};


export default Header;